import React from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
import {Modal, PickerView} from '@ant-design/react-native';

/**
 * <PickerViewModalCas ref={'picker'}
 * onChoose={(data) => {
     console.log('选择完成： ', data);
   }}
 data={[
 {label: '北京',value: '01',children: [{label: '东城区',value: '01-1'}]},
 {label: '浙江',value: '02',children: [
     label: '杭州',value: '02-1',children: [{label: '江干区',value: '02-1-3'}]},
     {label: '宁波',value: '02-2',children: [{label: 'xx区',value: '02-2-1'}]}
  ]}]}
 />
 */
export default class PickerViewModalCas extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      value: [],
    };
  }
  static defaultProps = {
    data: [],
    title: '请选择',
    onChoose: () => {}, // 选择的回调
    afterClose: () => {}, // 关闭后的回调
  };

  show() {
    this.setState({
      visible: true,
    });
  }
  hidden() {
    this.setState({
      visible: false,
    });
  }
  pickerChange(value) {
    // console.log(value);
    this.setState({
      value,
    });
  }
  _handleChooseData() {
    const {value} = this.state;
    const {data, onChoose} = this.props;
    let resultLabel = [];
    let tempValue = [];
    if (value.length > 0) {
      tempValue = value;
      resultLabel = this._getLabel(value, data);
    } else {
      this._getResLabel(data, resultLabel, tempValue);
    }
    onChoose &&
      onChoose({
        value: tempValue,
        label: resultLabel,
      });
  }
  // 不拖动直接点击选择
  _getResLabel(list, res, tempValue) {
    if (!list || list.length === 0) {
      return;
    }
    res.push(list[0].label);
    tempValue.push(list[0].value);
    this._getResLabel(list[0].children, res, tempValue);
  }
  _getLabel(keys, list) {
    const result = [];
    let eachList = list;
    // 循环值
    keys.forEach((key, index) => {
      // 循环数据
      for (let i = 0, len = eachList.length; i < len; i++) {
        const item = eachList[i];
        if (item.value === key) {
          result.push(item.label);
          eachList = item.children;
          break;
        }
      }
    });
    return result;
  }
  render() {
    const {visible, value} = this.state;
    const {title, data, onChoose, afterClose, colsNum = 2} = this.props;
    // console.log('data: ', data);
    return (
      <Modal
        popup
        visible={visible}
        closable={true}
        maskClosable={true}
        onClose={() => {
          this.hidden();
        }}
        animationType="slide-up"
        afterClose={() => {
          afterClose && afterClose();
        }}>
        <View style={styles.modalBody}>
          <View style={styles.pickerViewHeader}>
            <TouchableOpacity
              style={styles.headerBtn}
              onPress={() => {
                this.hidden();
              }}>
              <Text style={styles.btnText}>取消</Text>
            </TouchableOpacity>
            <Text style={styles.headerTitle}>{title}</Text>
            <TouchableOpacity
              style={styles.headerBtn}
              onPress={() => {
                this._handleChooseData();
                // this.onChoose(value)
              }}>
              <Text style={styles.btnText}>选择</Text>
            </TouchableOpacity>
          </View>
          <PickerView
            cols={colsNum}
            indicatorStyle={styles.indicatorStyle}
            itemStyle={styles.itemStyle}
            onChange={(e) => this.pickerChange(e)}
            data={data}
            cascade={true}
            value={value}
          />
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modalBody: {
    padding: 0,
    height: 280,
  },
  amPickerCol: {
    height: 100,
  },
  pickerViewHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: 50,
  },
  headerBtn: {
    width: '25%',
    alignItems: 'center',
  },
  headerTitle: {
    flex: 1,
    fontSize: 20,
    textAlign: 'center',
    color: '#666',
  },
  btnText: {
    fontSize: 18,
    color: '#04bbff',
  },
  indicatorStyle: {
    // backgroundColor: '#eee',// 未生效
    backgroundColor: '#ddd',
  },
  itemStyle: {
    paddingTop: 10,
    paddingBottom: 10,
    borderWidth: 0,
    color: '#777',
    fontSize: 18,
  },
});
